這次要來寫的是欄位圖片縮放的效果
一樣把基本架構寫好

<div class="container">
  <div class="hover-box">
    <div class="img-box"><img src="https://static.turbosquid.com/Preview/001238/688/S0/mountain-range-valley-3D-model_200.jpg"></div>
</div>
  <div class="hover-box">
    <div class="img-box"><img src="http://iphoto.ipeen.com.tw/photo/ipeen/200x200/def/9/3/0/1121039/1121039_20160902140016_4561.jpg"></div>
  </div>
  <div class="hover-box">
    <div class="img-box"><img src="https://www.stantonamarlberg.com/uploads/media/200x200/08/1538-Mountainbike2.jpg"></div>
  </div>
  <div class="hover-box">
    <div class="img-box"><img src="https://www.stantonamarlberg.com/uploads/media/200x200/08/1538-Mountainbike2.jpg"></div>
  </div>
</div>

然後設定css

body {
  background: #262626;
}

.container {
  max-width: 1200px;
  margin: auto;
  display: flex;
}

.hover-box {
  max-width: 25%;
  max-height: 200px;
  margin: auto;
  background: #4d674a;
  box-sizing: border-box;
}

.hover-box .img-box {
  position: relative;
  /*圖片縮放時 超過區塊的部分不要顯露出來*/
  overflow: hidden;
}

最後把 transition 跟 transform 的效果寫進來

.hover-box .img-box img {
  margin: auto;
  transition: transform 0.5s;
}

.hover-box:hover .img-box img {
  transform: scale(1.3);
}

到這邊就完成了
明天會接續今天這個階段，再往下寫成一個完整的 hover box 效果
今日的 codepen 如下
https://codepen.io/UHU/pen/yQBGpm